<template>
  <div class="bigBox">
    <!-- <topBar></topBar> -->
    <div id="container"></div>

    <div class="controlPanel">
      <h4>轨迹回放控制</h4>
      <div class="flex mb-1">
        <el-button class="mr-1" @click="startAnimation">开始动画</el-button>
        <el-button @click="pauseAnimation">暂停动画</el-button>
      </div>
      <div class="flex">
        <el-button class="mr-1" @click="resumeAnimation">继续动画</el-button>
        <el-button @click="stopAnimation">停止动画</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// imports

import { load } from '@amap/amap-jsapi-loader'
import { ref, onMounted, onUnmounted } from 'vue'

let map = ref<any>()
let AMap = ref<any>()
const marker = ref()
const lineArr = ref<[number, number][]>([
  [116.478935, 39.997761],
  [116.478939, 39.997825],
  [116.478912, 39.998549],
  [116.478912, 39.998549],
  [116.478998, 39.998555],
  [116.478998, 39.998555],
  [116.479282, 39.99856],
  [116.479658, 39.998528],
  [116.480151, 39.998453],
  [116.480784, 39.998302],
  [116.480784, 39.998302],
  [116.481149, 39.998184],
  [116.481573, 39.997997],
  [116.481863, 39.997846],
  [116.482072, 39.997718],
  [116.482362, 39.997718],
  [116.483633, 39.998935],
  [116.48367, 39.998968],
  [116.484648, 39.999861],
])

interface IMarker {
  lon: number
  lat: number
  title: string
  time?: string
  number?: string | number
}
const markerList = ref<IMarker[]>([
  {
    lon: 116.397128,
    lat: 39.916527,
    title: '北京',
    time: '2024-09-28 12:12:12',
    number: 23,
  },
  {
    lon: 116.405285,
    lat: 39.904989,
    title: '东城区',
    time: '2024-09-28 12:12:12',
    number: 21,
  },
])

// props

// emits

// refs

// computed

// methods
//开始动画
const startAnimation = () => {
  marker.value.moveAlong(lineArr.value, {
    duration: 500,
    autoRotation: true,
  })
}
//暂停动画
const pauseAnimation = () => {
  marker.value.pauseMove()
}
//继续动画
const resumeAnimation = () => {
  marker.value.resumeMove()
}
//停止动画
const stopAnimation = () => {
  marker.value.stopMove()
}

let initMap = async () => {
  AMap.value = await load({
    key: '4b47c3b15b2c298a9d9e174be21d7ee7', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map('container', {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 13, // 初始化地图级别
    // center:[113.808299,34.791787], // 初始化地图中心点位置，不设置的时候默认展示当前位置
  })

  // JSAPI2.0 使用覆盖物动画必须先加载动画插件
  AMap.value.plugin('AMap.MoveAnimation', function () {
    map.value = new AMap.value.Map('container', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 17, // 初始化地图级别
      resizeEnable: true,
      //   center: [116.397428, 39.90923] // 初始化地图中心点位置
      center: [116.478935, 39.997761], // 初始化地图中心点位置
    })

    //小车配置
    marker.value = new AMap.value.Marker({
      map: map.value,
      position: lineArr.value[0],
      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
      offset: new AMap.value.Pixel(-13, -26),
    })

    // 绘制轨迹
    new AMap.value.Polyline({
      map: map.value,
      path: lineArr.value,
      showDir: true,
      strokeColor: '#28F', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    })

    //移动后的轨迹
    let passedPolyline = new AMap.value.Polyline({
      map: map.value,
      strokeColor: '#AF5', //线颜色
      strokeWeight: 6, //线宽
    })

    marker.value.on('moving', function (e: any) {
      console.log('!!')
      passedPolyline.setPath(e.passedPath)
      map.value.setCenter(e.target.getPosition(), true)
    })

    map.value.setFitView()
  })
  addMarkers()
}

// 添加marker海量点标记
const addMarkers = () => {
  let stationMarkers: IMarker[] = []
  markerList.value?.forEach((item) => {
    let marker = new AMap.value.Marker({
      map: map.value,
      position: [item.lon, item.lat],
      offset: new AMap.value.Pixel(-16, 0),
      icon: '',
      data: item,
    })
    // 点击点标记展示信息窗体
    marker.on('click', (e: any) => {
      console.log(e)
      //   showBusInfoWindow({ ...item, ...e }, AMap)
    })
    stationMarkers.push(marker)
  })
  map.value.add(stationMarkers)
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  map.value?.destroy()
})
</script>
<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;

  #container {
    width: 100%;
    height: 100%;
  }

  .controlPanel {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

    button {
      margin: 5px 0;
    }
  }
}
</style>
